<template>
	<view class="content">
		<view class="shuru">
			<input @input="change" v-model="nickName" type="text" maxlength="16" confirm-type="保存" @confirm="save()" />
	
			<view :class="isChange" @tap="save()">保存</view>


		</view>
		<text class="tips">好的名字可以让大家更容易记住你</text>

	</view>
</template>
<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import utils from "../../static/js/utils.js"
	export default {
		data() {
			return {
				oldName: "",
				nickName: "",
				isChange: "btn dis"
			};
		},
		methods: {
			...mapMutations(['setNickName']),
			change(event) {
				var val = event.detail.value;
				if (val == this.oldName || val.length == 0) {
					this.isChange = "btn dis";
				} else {
					this.isChange = "btn enb";
				}
			},
			save() {
				if (this.isChange == "btn enb") {
					if (this.nickName.length == 0) {
						utils.errorToast("昵称不能为空");
						return;
					}
					var that = this;
					utils.post("user/changenickname", {
						nickName: this.nickName
					}, function(data) {
						that.setNickName({
							nickName: data
						});
						uni.navigateBack({
							delta: 1,
							animationType: 'zoom-fade-out',
							animationDuration: 200
						})
					});
				}
			}
		},
		onLoad(option) {
			this.nickName = option.nickName;
			this.oldName = option.nickName;
		}
	}
</script>

<style>
	page {
		background-color: #f4f4f4;
	}
	.content {
		display: flex;
		flex-direction: column;
		width: 100%;
		align-items: center;
	}

	.shuru {
		width: 90%;
		height: 80upx;
		margin-top: 50upx;
		border-bottom: 1px solid #D81E06;
		font-size: 35rpx;
		display: flex;
		flex-direction: row;

	}

	.shuru input {
		flex: 1;
		height: 80upx;
	}

	.tips {
		width: 90%;
		height: 30upx;
		font-size: 29upx;
		margin-top: 30upx;
		color: #666666;
	}

	.btn {
		width: 120upx;
		height: 66upx;
		text-align: center;
		line-height: 66upx;
		border-radius: 10upx;
		font-size: 30upx;
	}

	.enb {
		background-color: #D81E06;
		color: #ffffff;
	}

	.dis {
		background-color: #D81E06;
		color: #ffffff;
		opacity: 0.2;
	}
</style>
